<template>
    <div class="container">
        <header>
            <div>
                <img src="@/assets/hezuo.jpeg" alt="">
                <div>
                    <h3>{{ this.totalInfo.cooperateCount }}</h3>
                    合作总数
                </div>
            </div>
            <div>
                <img src="@/assets/chanpin.jpeg" alt="">
                <div>
                    <h3>{{ this.totalInfo.productCount }}</h3>
                    产品总数
                </div>
            </div>
            <div>
                <img src="@/assets/xiaoshoue.jpeg" alt="">
                <div>
                    <h3>{{ this.totalInfo.salesCount }}</h3>
                    销售额
                </div>
            </div>
            <div>
                <img src="@/assets/esc.jpeg" alt="">
                <div>
                    <h3>{{ this.totalInfo.cancelCount }}</h3>
                    已取消
                </div>
            </div>
        </header>
        <div class="bq" ref="node">

        </div>
        <main>
            <div class="left" ref="node2">
                <span class="loading">加载中...</span>
            </div>
            
            <div class="right">
                <div class="top" ref="node3">上</div>
                <div class="btn">
                    {{ userInfo.name }}
                    <br>
                    退出
                </div>
            </div>
        </main>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import { analysisCustomerApi, supplierInfoApi, systemInfoApi } from '../../apis/homeApi'
    import a from './userInfo'
    import b from './a'
    import c from './salesvolume'
    import { loginApi } from '../../apis/userApi'
    export default {
        data() {
            return {
                data: [],
                data2: [],
                echartsObj: null,
                echartsObj2: null,
                timer: null,
                userInfo: {},
                node: null,
                node2: null,
                times: null,
                totalInfo: {}
            }
        },
        created(){
            this.userInfo = this.$store.getters['common/userInfo']
        },
        mounted(){
            this.node = this.$refs.node
            this.echartsObj = echarts.init(this.node)

            this.node2 = this.$refs.node2
            this.echartsObj2 = echarts.init(this.node2)

            this.node3 = this.$refs.node3
            this.echartsObj3 = echarts.init(this.node3)

            this.loop()
            window.addEventListener('resize',this.onresize)
        },
        beforeDestroy(){
            clearTimeout(this.timer)
            this.timer = null
            window.removeEventListener('resize',this.onresize)

            clearTimeout(this.times)
        },
        methods: {
            // 改变窗口大小
            onresize(){
                let t = null;
                if(!t){
                    clearTimeout(this.t)
                    this.t = null
                    t = setTimeout(() => {
                        this.echartsObj.resize()
                        this.echartsObj2.resize()
                        clearTimeout(t)
                        t = null
                    }, 300)
                }
            },
            // 轮询数据
            loop(){
                let aaa = []
                Promise.all([
                    analysisCustomerApi(),
                    supplierInfoApi(),
                    systemInfoApi()
                ]).then(res => {
                    if(res[0].code === 200){
                        this.data = res[0].data?.sort((a,b) => {
                            return b.salesAmount - a.salesAmount
                        }).slice(0,20)
                    }
                    if(res[1].code === 200){
                        let aa = res[1].data?.sort((a,b) => {
                            return b.quality - a.quality
                        }).slice(0,10)
                        aa?.forEach(item => {
                            let dataObj = {
                                value: item.quality,
                                name: item.customerName
                            }
                            aaa.push(dataObj)
                        });
                        this.data2 = aaa
                    }
                    if(res[2].code === 200){
                        this.totalInfo = {
                            cooperateCount: res[2].data.cooperateCount,
                            productCount: res[2].data.productCount,
                            salesCount: res[2].data.salesCount,
                            cancelCount: res[2].data.cancelCount
                        }
                    }
                })

                // analysisCustomerApi().then(res => {
                //     this.data = res.data?.sort((a,b) => {
                //         return b.salesAmount - a.salesAmount
                //     }).slice(0,20)
                // })

                // supplierInfoApi().then(res => {
                //     let aa = res.data?.sort((a,b) => {
                //         return b.quality - a.quality
                //     }).slice(0,10)
                //     aa?.forEach(item => {
                //         let dataObj = {
                //             value: item.quality,
                //             name: item.customerName
                //         }
                //         aaa.push(dataObj)
                //     });
                //     this.data2 = aaa
                // })
                
                // systemInfoApi().then(res => {
                //     if(res.code === 200){
                //         this.totalInfo = {
                //             cooperateCount: res.data.cooperateCount,
                //             productCount: res.data.productCount,
                //             salesCount: res.data.salesCount,
                //             cancelCount: res.data.cancelCount
                //         }
                //     }
                // })

                this.timer = setTimeout(() => {
                        this.timer = null
                        this.init()
                        this.loop()
                },600)

            },
            init(){
                this.echartsObj.setOption(
                    a(this.data)
                )
                this.echartsObj2.setOption(
                    b(this.data2)
                )
                this.echartsObj3.setOption(
                    c(this.data)
                )
            }
        },
    }
</script>

<style lang="less" scoped>
    .container{
        height: calc(100% - 57px - 16px - 30px);
        width: (100% - 4px);
        overflow-x: hidden;
        padding: 16px;
        > header{
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            > div{
                width: calc(100% / 6);
                min-width: 200px;
                background-color: white;
                height: 130px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                > img{
                    width: 100px;
                    height: 100px;
                }
                > div{
                    text-align: center;
                    font-weight: 600;
                    > h3{
                        color: #00adb5;
                    }
                }
            }
        }
        > .bq{
            height:calc(100% - 35%);
            width: 100%;
            border: 1px solid #bbbbbd;
            margin-bottom: 10px;
            min-width: 800px;
        }
        > main{
            display: flex;
            height: calc(100% - 130px - 40px - 30px);
            
            .left{
                flex: 1;
                background-color: white;
                height: calc(100% );
                min-width: 500px;
                border: 1px solid #bbbbbd;
                .loading{
                    display: flex;
                    height: 100%;
                    width: 100%;
                    justify-content: center;
                    align-items: center;
                }
            }
            .right{
                // flex: 0 0 0 480;
                width: 300px;
                margin-left: 16px;
                min-width: 280px;
                > .top{
                    width: 100%;
                    height: calc(100% - 50%);
                    background-color: white;
                    margin-bottom: 10px;
                    border: 1px solid #bbbbbd;
                }
                > .btn{
                    width: 100%;
                    height: calc(100% - 50% - 12px);
                    background-color: white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px solid #bbbbbd;
                }
            }
        }
    }
</style>